<template>
  <div class="loginBox">
    <div class="loginContent">
      <div class="leftBox lt-xl:hidden">
        <div class="loginLogoBox text-4xl font-bold">{{ tilte }}</div>
        <!-- <img class="loginLogo" src="@/assets/imgs/loginLogo.png" /> -->
        <img class="loginImg" src="@/assets/imgs/loginImg.png" />
      </div>
      <div class="rightBox">
        <LoginForm />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { LoginForm } from './components'

defineOptions({ name: 'Login' })

let tilte = import.meta.env.VITE_APP_TITLE
</script>

<style lang="scss" scoped>
.loginBox {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;
  background-image: url('@/assets/imgs/loginBg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;

  .loginContent {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    height: 100%;
    padding: 0% 15%;
    box-sizing: border-box;

    // 小于 1920px 时的样式
    @media screen and (max-width: 1920px) {
      .leftBox {
        margin-right: 66px;
        .loginLogo {
          width: 326px;
          height: 100px;
          margin-left: 46px;
        }
        .loginLogoBox {
          display: flex;
          align-items: center;
          width: 326px;
          height: 100px;
          margin-left: 46px;
          color: var(--el-color-primary);
        }
        .loginImg {
          width: 620px;
          height: 412px;
        }
      }
      .rightBox {
        padding: 60px 45px;
        background-color: #ffffff;
        border-radius: 15px;
        box-shadow: 0px 9 18px 0px rgba(162, 189, 247, 0.4);
      }
    }
    // 大于 1920px 时的样式
    @media screen and (min-width: 1920px) {
      .leftBox {
        margin-right: 88px;
        .loginLogo {
          width: 436px;
          height: 142.5px;
          margin-left: 58px;
        }
        .loginLogoBox {
          display: flex;
          align-items: center;
          width: 436px;
          height: 142.5px;
          margin-left: 58px;
          color: var(--el-color-primary);
        }
        .loginImg {
          width: 827px;
          height: 549px;
        }
      }
      .rightBox {
        padding: 80px 60px;
        background-color: #ffffff;
        border-radius: 20px;
        box-shadow: 0px 12px 24px 0px rgba(162, 189, 247, 0.4);
      }
    }
  }
}
</style>
